<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <h1 class="tac my-font"><span>📂</span> vue3-file-system-client</h1>
  <nav class="mb20 tac fz18">
    <RouterLink to="/">文件管理</RouterLink>
    <RouterLink to="/dataOverview">数据概览</RouterLink>
    <RouterLink to="/about">关于</RouterLink>
  </nav>
  <div class="content">
    <RouterView />
  </div>
</template>

<style scoped lang="scss">
nav {
  a.router-link-exact-active {
    color: var(--color-text);
  }

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    text-decoration: none;
    color: #000;
  }

  a:first-of-type {
    border: 0;
  }
}
.content {
  flex: 1;
}
</style>
